<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>数据中心</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/test2.css">
    <!--    <link rel="stylesheet" href="../css/test.css">-->

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../plugins/elementui/style2.css">



</head>

<body class="h  old-transition">

<div id="app">
    <!--    style="background-color: #6f7180"-->
    <div class="content-header" >

        <!--        <h1 style="background-color: #6f7180;text-align: center;font-family: 'PingFang SC';line-height:1 " >AGE客栈 </h1>-->
        <div class="line"></div>
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
        >
            <el-menu-item index="4"
                          style="font-size: 20px"
            ><a href="http://139.9.241.51:8282/login">AGE客栈</a></el-menu-item>
        </el-menu>
    </div>


    <div class="app-container">
        <div class="left"  style="width: 200px">

            <el-menu
                    style="min-height: calc(85vh)"
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">数据中心</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span style="text-align: center">内容管理</span>
                    </template>
                    <el-menu-item-group>
                        <a href="http://139.9.241.51:8282/Manager">
                        <el-menu-item index="2-1" >帖子管理</el-menu-item>
                        </a>
                        <el-menu-item index="2-2">申诉管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <!--                    <el-menu-item index="3" disabled>-->
                <!--                        <i class="el-icon-document"></i>-->
                <!--                        <span slot="title">导航三</span>-->
                <!--                    </el-menu-item>-->
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">平台设置 </span>
                </el-menu-item>
            </el-menu>

        </div>
        <div class="box" style="background-color: #f6f7f8">
            <div id="main" style="width: 650px;height:400px;background-color: #f6f7f8;margin-left:230px;margin-top: 15px"></div>
        </div>

    </div>
<!--    <div class="box" >-->
<!--        <div id="test" style="width: 600px;height:350px;background-color: #f6f7f8;margin-left:230px;"></div>-->
<!--    </div>-->
</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>
<script src="../js/echarts.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '姓名为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '工作单位为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:7,//每页显示的记录数
                total:0,//总记录数
                employer:"",
                name:"",
                sex:""

            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
        },

        methods: {
        }
    })

</script>
<script type="text/javascript" >
    var myChart1 = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
                    text: '近期平台数据'
                },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['精选文章数量', '新文章数量', '用户活跃数']
        },
        xAxis: [
            {
                type: 'category',
                data: (function (){
                                var arr1=[];
                                $.ajax({
                                    url:"http://139.9.241.51:8282/BlogData",
                                    async:false,
                                    cache:false,
                                    data : {},
                                    dataType : "json", //返回数据形式为json
                                    success:function (data){
                                        if (data.data) {
                                            for(var i=0;i<data.data.length;i++){
                                                arr1.push(data.data[i].date)
                                            }}
                                    },
                                    error:function (error){
                                        console.log(error);
                                        console.log("error");
                                    }
                                })
                                return arr1;
                            })(),
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '新文章数量',
                min: 0,
                max: 1000,
                interval: 100,
                // axisLabel: {
                //     formatter: '{value} ml'
                // }
            },
            {
                type: 'value',
                name: '用户活跃数',
                min: 0,
                max: 1000,
                interval: 100,
                // axisLabel: {
                //     formatter: '{value} °C'
                // }
            }
        ],
        series: [
            {
                name: '精选文章数量',
                type: 'bar',
                data:  (function (){
                    var arr1=[];
                    $.ajax({
                        url:"http://139.9.241.51" +
                            ":8282/BlogData",
                        async:false,
                        cache:false,
                        data : {},
                        dataType : "json", //返回数据形式为json
                        success:function (data){
                            if (data.data) {
                                for(var i=0;i<data.data.length;i++){
                                    arr1.push(data.data[i].featuredarticles)
                                }}
                        },
                        error:function (error){
                            console.log(error);
                            console.log("error");
                        }
                    })
                    return arr1;
                })()
            },
            {
                name: '新文章数量',
                type: 'bar',
                data: (function (){
                    var arr1=[];
                    $.ajax({
                        url:"http://139.9.241.51:8282/BlogData",
                        async:false,
                        cache:false,
                        data : {},
                        dataType : "json", //返回数据形式为json
                        success:function (data){
                            if (data.data) {
                                for(var i=0;i<data.data.length;i++){
                                    arr1.push(data.data[i].newarticle)
                                }}
                        },
                        error:function (error){
                            console.log(error);
                            console.log("error");
                        }
                    })
                    return arr1;
                })()
            },
            {
                name: '用户活跃数',
                type: 'line',
                yAxisIndex: 1,
                data: (function (){
                    var arr1=[];
                    $.ajax({
                        url:"http://139.9.241.51:8282/BlogData",
                        async:false,
                        cache:false,
                        data : {},
                        dataType : "json", //返回数据形式为json
                        success:function (data){
                            if (data.data) {
                                for(var i=0;i<data.data.length;i++){
                                    arr1.push(data.data[i].usersamount)
                                }}
                        },
                        error:function (error){
                            console.log(error);
                            console.log("error");
                        }
                    })
                    return arr1;
                })()
            }
        ]
    };
    myChart1.setOption(option1);
    // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    //
    // // 指定图表的配置项和数据
    // var option = {
    //     title: {
    //         text: '近七日活跃用户数量'
    //     },
    //     tooltip: {},
    //     legend: {
    //         data: ['销量']
    //     },
    //     xAxis: {
    //         data: (function (){
    //             var arr1=[];
    //             $.ajax({
    //                 url:"http://localhost:8282/Summary",
    //                 async:false,
    //                 cache:false,
    //                 data : {},
    //                 dataType : "json", //返回数据形式为json
    //                 success:function (data){
    //                     if (data.data) {
    //                         for(var i=0;i<data.data.length;i++){
    //                             arr1.push(data.data[i].name)
    //                         }}
    //                 },
    //                 error:function (error){
    //                     console.log(error);
    //                     console.log("error");
    //                 }
    //             })
    //             return arr1;
    //         })()
    //     },
    //     yAxis: {},
    //     series: [
    //         {
    //             name: '销量',
    //             type: 'bar',
    //             data: (function (){
    //                 var arr1=[];
    //                 $.ajax({
    //                     url:"http://localhost:8282/Summary",
    //                     async:false,
    //                     cache:false,
    //                     data : {},
    //                     dataType : "json", //返回数据形式为json
    //                     success:function (data){
    //                         if (data.data) {
    //                             for(var i=0;i<data.data.length;i++){
    //                                 arr1.push(data.data[i].id)
    //                             }}
    //                     },
    //                     error:function (error){
    //                         console.log(error);
    //                         console.log("error");
    //                     }
    //                 })
    //                 return arr1;
    //             })()
    //         }
    //     ]
    // };
    // myChart.setOption(option);


    // var myChart2 = echarts.init(document.getElementById('test'));
    //
    // var option2 = {
    //     title: {
    //         text: '近七日活跃用户数量'
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: (function (){
    //             var arr1=[];
    //             $.ajax({
    //                 url:"http://localhost:8282/BlogData",
    //                 async:false,
    //                 cache:false,
    //                 data : {},
    //                 dataType : "json", //返回数据形式为json
    //                 success:function (data){
    //                     if (data.data) {
    //                         for(var i=0;i<data.data.length;i++){
    //                             arr1.push(data.data[i].date)
    //                         }}
    //                 },
    //                 error:function (error){
    //                     console.log(error);
    //                     console.log("error");
    //                 }
    //             })
    //             return arr1;
    //         })()
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             data: (function (){
    //                 var arr1=[];
    //                 $.ajax({
    //                     url:"http://localhost:8282/BlogData",
    //                     async:false,
    //                     cache:false,
    //                     data : {},
    //                     dataType : "json", //返回数据形式为json
    //                     success:function (data){
    //                         if (data.data) {
    //                             for(var i=0;i<data.data.length;i++){
    //                                 arr1.push(data.data[i].usersamount)
    //                             }}
    //                     },
    //                     error:function (error){
    //                         console.log(error);
    //                         console.log("error");
    //                     }
    //                 })
    //                 return arr1;
    //             })(),
    //             type: 'line',
    //             smooth: true
    //         }
    //     ]
    // };
    // myChart2.setOption(option2);
   // axios.get("/Summary").then((res=>{
   //     console.log("succ");
   //     console.log(res.data);
   //     console.log(res.data.data);
   //     this.myChart.setOption({
   //         xAxis:{data:res.data.data.id},
   //         series:[{name: '销量',data:res.data}]
   //     })
   // }))
   //  $.ajax({
   //  url:"http://localhost:8282/Summary",
   //  async:false,
   //  cache:false,
   //  success:function (data){
   //      var arr1=[];
   //      var arr2=[];
   //      if (data.data) {
   //          for(var i=0;i<data.data.length;i++){
   //              arr1.push(data.data[i].name)
   //              console.log(data.data[i].name);
   //              console.log(data.data.name);
   //              arr2.push(data.data[i].id)
   //          }}
   //      console.log(arr2);
   //      console.log(arr1);
   //      myChart.setOption({
   //          xAxis:{data:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},
   //          series:[{name: '销量',data:[5, 20, 36, 10, 10, 20]}]
   //          });
   //
   //  },
   //      error:function (error){
   //      console.log(error);
   //          console.log("error");
   //      }
   //  });


</script>
</html>